<template>
  <div class="sale" ww3 auto>
    <div class="sale-bar" flex flex-b flex-c>
      <p grey fz14 flex flex-c style="font-size: 14px;">
        <span>全部 <i>{{ countInfo.allCount }}</i></span>
        <span style="color: #444">已通过<i>{{ countInfo.allYCount }}</i></span>
        <span style="color: #ff9800">待处理<i>{{ countInfo.allDCount }}</i></span>
        <span style="color: #ff0000">未通过<i>{{ countInfo.allWCount }}</i></span>
      </p>

      <div class="sale-bar-r" flex flex-c flex-b>
        <div flex flex-c style="color: #696666; font-size: 15px">
          筛选：
          <el-checkbox-group v-model="checkList" @change="getVideoList">
            <el-checkbox label="1">透明通道</el-checkbox>
            <el-checkbox label="2">无缝循环</el-checkbox>
          </el-checkbox-group>
        </div>

        <div style="width: 50%">
          <el-input
            placeholder="输入标题或素材编号、卖家"
            suffix-icon="el-icon-search"
            v-model="title"
            @keyup.enter.native="getVideoList"
          >
          </el-input>
        </div>
      </div>
    </div>

    <dl class="action-wap" flex flex-b flex-c ww1 fz-14 grey="">
      <!-- <dt>
        作品被其他网站侵权？
        <span cur blue=""> >>立即举报 </span>
      </dt> -->
      <dd></dd>
    </dl>

    <div class="sale-type" flex flex-b flex-c>
      <div class="sale-type-l">
<!--        <el-radio v-model="radio" label="1">全部</el-radio>-->
<!--        <el-radio v-model="radio" label="2">个人授权</el-radio>-->
<!--        <el-radio v-model="radio" label="3">企业授权</el-radio>-->
<!--        <el-radio v-model="radio" label="4">企业PLUS授权</el-radio>-->
      </div>

      <div class="sale-type-r">
        <!-- <el-button>发票中心</el-button> -->
        <!-- <el-button>详细授权规则</el-button> -->
      </div>
    </div>

    <div class="sale-table">
      <el-table
        :data="list"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column
          fixed
          prop="name"
          label="全部素材"
          width="290"
          :filters="[
            { text: 'AE模板', value: 'AE模板' },
            { text: '3D模型', value: '3D模型' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <dl class="table-img" pos-a>
              <dt pos-a>
                <p pos-b ww1 style="left: 10px">
                  {{scope.row.title}}<br />
                  {{scope.row.categoryIds == '25' ? "实拍视频" : "AE模板"}}
                </p>
                <el-image
                  ww1
                  :src="fileUrl + scope.row.filesImg1"
                  fit="cover"
                  style="width: 290px; height: 160px"
                >
                </el-image>
              </dt>
              <dd pos-b flex flex-c ww1 style="justify-content: flex-end">
                <span>{{$formatDuring(scope.row.fileSometimes)}}</span>
              </dd>
            </dl>
          </template>
        </el-table-column>
        <el-table-column prop="clickRate" label="点击量" sortable width="120"></el-table-column>
        <el-table-column prop="collectRate" label="收藏" sortable width="120"></el-table-column>
        <el-table-column prop="downloadRate" label="下载" sortable width="120"></el-table-column>
        <el-table-column prop="individualPrice" label="售价（元）" sortable width="120"></el-table-column>
        <el-table-column prop="profit" label="收益" sortable width="120"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" sortable width="130"></el-table-column>
        <el-table-column prop="zip" label="状态" width="80">
          <template slot-scope="scope">   
            <p v-if="scope.row.status == 1" style="color: rgba(27, 208, 237, 0.96)">审核中</p>
            <p v-if="scope.row.status == 2" style="color: rgba(255, 0, 0, 0.96)">
              审核通过
            </p>
            <p v-if="scope.row.status == 3" style="color: rgb(255, 178, 82)">
              审核不通过
            </p>
            <p v-if="scope.row.status == 4" style="color: rgb(255, 178, 82)">
              待提交
            </p>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              style="margin-left: 0; margin-top: 10px;"
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div flex ww1 style="justify-content: center">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
      </el-pagination>
    </div>
    <editPro ref="editPro" @sure="getVideoList"/>
  </div>
</template>

<script>
import http from "@/api/info/video"
import editPro from "./EditPro.vue"
export default {
  name: "SaleRecord",
  data() {
    return {
      countInfo: {},
      fileUrl: this.$url.fileUrl,
      radio: "1",
      title: '',
      id: "1234",
      list:[],
      total: 0,
      checkList: [],
      pageSize: 5,
      pageNum: 1
    };
  },
  components: {
    editPro
  },
  mounted() {
    this.getVideoList();
  },
  methods: {
    handleDelete(data) {
      debugger
      this.$confirm(`确定移除删除？`).then(res => {
        http[data.profit > 0 ? 'move' : 'delete']({
          "videoId": data.videoId
        }).then(res => {
          this.$message.success('操作成功')
          this.getVideoList();
        })
      })
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },

    handleEdit(row) {
      this.$refs.editPro.showFun(row.videoId);
      // this.$router.push({
      //   name: "EditPro",
      //   params: {
      //     id: row.id,
      //   },
      // });
    },
    //分页事件
    currentChange(val) {
      this.pageNum = val;
      this.getVideoList();
    },
    /**
     * 获取视频列表数据
     */
    getVideoList() {
      let that = this;
      let data = {
        "userId": sessionStorage.getItem('userId'),
        "aisleAuthorization": this.checkList.join(''),
        title: this.title
      };
      this.$http({
          url: this.$url.baseUrl + "/video/page?pageSize="+this.pageSize+"&pageNum=" + this.pageNum,
          data: data, 
          method: "post"
      }).then((res) => {
        that.list = res.data.rows;
        that.total = res.data.total;
        console.log(that.list);
      })

      http.getByCount({
        "userId": sessionStorage.getItem('userId'),
      }).then(res => {
        this.countInfo = res.data
      })
    },
  },
};
</script>

<style scoped>
.sale-table >>> .el-table th.el-table__cell > .cell {
  color: #050404;
  text-align: center;
}
.sale-table >>> .el-table td {
  text-align: center;
}
.sale-table {
  margin-bottom: 2%;
}
.sale >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #e74b3c;
}
.sale-bar p span {
  padding-right: 12px;
}
.sale-bar-r {
  width: 45%;
}
.action-wap {
}
</style>
